<template>  
	<view class="content">
		<view style="width: 100%;height: 650rpx;margin-top: -320rpx;margin-left: 32rpx;transform:rotate(0deg);">
			<!-- <image src="../../static/loop1_02.jpg" mode=""></image> -->
			<u-swiper class="uimg" style="transform:rotate(270deg);" :list="list" height="850" img-mode="scaleToFill" :circular="true" mode="none" interval="3200" duration="3900"></u-swiper>
		</view>
		<!-- <view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view> -->

		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="输入手机号" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码"
					password="true" />
			</view>
		</view>

		<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
			<text>登录</text>
		</view>
<!-- 		<view style="text-align: center;">
			<view>------请您先授权微信登录------</view>
		</view>
		<view style="text-align: center;margin-top: 50rpx;">
			<u-button class="" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" size="medium" withCredentials="true"
				type="success" shape="circle">授权登录</u-button>
		</view> -->
		<view class="agreenment">
			<!-- <navigator url="forget" open-type="navigate">忘记密码</navigator> -->
			<!-- <text>|</text> -->
			<navigator url="reg" open-type="navigate">注册账户</navigator>
			{{paiz}}
		</view>
		
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	//import * as request from '@/api/request.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				userId: '',
				username: '',
				token: '',
				sex: '',
				userinfo: {
					nickName: '',
					avatarUrl: '',
					gender: ''
				},
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				gender: null,
				isCanUse: uni.getStorageSync('isCanUse') || true ,//默认为true
				list:[
					'../../static/loop1_05.jpg',
					'../../static/loop1_04.jpg',
					'../../static/loop1_03.jpg',
					'../../static/loop1_02.jpg',
					'../../static/loop1_01.jpg'
				],
				top:"top: 20rpx;",
				top1:20,
				paiz:""
			};
		},

		onLoad() {
			this.init();
			// this.login();
		},
		methods: {
			login() {
				console.log("1111111111");
				// uni.login({
				// 	provider: 'weixin',
				// 	success: (res) => {
				// 		console.log("code==="+res.code)
				// 		api.request({
				// 			url: '/userLogin/weChatLogin',
				// 			method: 'GET',
				// 			data: {
				// 				code: res.code
				// 			},
				// 		}).then(res=>{
				// 			this.OpenId = res.data.openid;
				// 			this.SessionKey = res.data.session_key;
				// 			console.log(res);
				// 		});
				// 	}
				// })
			},
			get() {
				uni.getStorage({
					key: 'userinfo',
					success: function(res) {
						console.log(res.data);
					},
					fail: function() {
						console.log('fail')
					}
				});
			},
			// wxGetUserInfo: function(res) {
			// 	let that = this;
			// 	if (!res.detail.iv) {
			// 		uni.showToast({
			// 			title: "您取消了授权,失败",
			// 			icon: "none"
			// 		});
			// 		return false;
			// 	}
			// 	console.log('-------用户授权，并获取用户基本信息和加密数据------')
			// 	//console.log(res);
			// 	this.userinfo = res.detail.userInfo;
			// 	this.userinfo.nickname = res.detail.userInfo.nickName;
			// 	this.userinfo.avatarUrl = res.detail.userInfo.avatarUrl;
			// 	if (res.detail.userInfo.gender == '1') {
			// 		this.sex = '男'
			// 	} else if (res.detail.userInfo.gender == '0') {
			// 		this.sex = '女'
			// 	}
			// 	this.userinfo.gender = this.sex;
			// 	// console.log(this.userinfo.nickName);
			// 	api.request({
			// 		url: api.baseUrl + '/userinfo',
			// 		method: "GET",
			// 		data: {
			// 			//userInfo:this.userinfo,
			// 			openid: this.OpenId,
			// 			nickName: this.userinfo.nickname,
			// 			avatarUrl: this.userinfo.avatarUrl,
			// 			gender: this.sex
			// 		},
			// 	}).then(res=>{
			// 		//console.log(res);
			// 		uni.setStorage({
			// 			key: 'userinfo',
			// 			data: {
			// 				openid: that.OpenId,
			// 				nickName: that.userinfo.nickname,
			// 				avatarUrl: that.userinfo.avatarUrl,
			// 				gender: that.sex
			// 			},
			// 			success: (res) => {
			// 				console.log('登录成功')
			// 			}
			// 		})
			
			// 	})
			// },

			init() {
				uni.getStorage({
					key: 'phone',
					success: (res) => {
						this.phone = res.data
					},
				});
			},

			//登录
			bindLogin() {
				if (this.phone.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码不正确'
					});
					return;
				}
				api.request({
					url: '/webLogin',
					data: {
						principal: this.phone,
						credentials: this.password
					},
					method: 'POST',
					//dataType: 'json',
				}).then(res=>{
					// if(this.ger.sex == 'F'){
					// 	uni.chooseImage({
					// 	    count: 1, //默认9
					// 	    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// 	    sourceType: ['camera'], //拍照
					// 	    success: function (res) {
					// 			console.log(res)
					// 	    },
					// 		fail: function (res) {
					// 			console.log('调取失败')
					// 		}
					// 	});
					// }
					
					if(res.statusCode==200){
						uni.setStorageSync('token',res.data.access_token)
						
						// uni.reLaunch({
						// 			url: '../index/index'
						// 		});
						if(res.data.sex == 'F'){
							uni.reLaunch({
								url:"./photo"
							})
						}else{
							uni.showToast({
								icon: 'none',
								title: '登录成功'
							});
							setTimeout(()=>{
								uni.reLaunch({
									url: '../index/index'
								});
							},500)
						}
					}
					
					
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #3b3b43;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	
	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}
	
	.loop{
		position: fixed;
	}
	
	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
		margin-top: 150rpx;
	}
	
	 wx-swiper .u-swiper-image {
		 margin-top: -6rpx;
	 }
	 
	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
		color: #FFFFFF;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreenment {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreenment text {
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
</style>
